<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import LineHeader from '@/components/LineHeader.vue'
import {
  createProvider,
  deleteProviderById,
  getProviderList,
  updateProvider,
} from '@/apis/logistics'
import {
  ElMessage,
  type FormInstance,
  type FormRules,
  ElMessageBox,
  type Action,
} from 'element-plus'

/**
 * 物流商列表
 */
const orderList = ref()

/**
 * 添加物流商
 */
// 添加物流商弹窗
const addProviderFormVisible = ref(false)
// 添加物流商表单
const addProviderForm: any = ref({
  VendorName: '',
  ContactNumber: '',
  Address: '',
  Country: '',
  Remarks: '',
})
// 添加表单对象
const addProviderFormRef = ref()
// 打开添加物流商弹窗
const openAddProviderForm = () => {
  addProviderFormVisible.value = true
}
// 添加表单校验规则
const providerFormRules = reactive<FormRules>({
  VendorName: [
    {
      required: true,
      message: '请输入物流商名称',
      trigger: 'blur',
    },
  ],
  ContactNumber: [
    {
      required: true,
      message: '请输入联系电话',
      trigger: 'blur',
    },
  ],
  Address: [
    {
      required: true,
      message: '请输入物流商地址',
      trigger: 'blur',
    },
  ],
  Country: [
    {
      required: true,
      message: '请输入国家/地区',
      trigger: 'blur',
    },
  ],
  Remarks: [
    {
      required: true,
      message: '请输入物流商备注',
      trigger: 'blur',
    },
  ],
})

// 添加物流商表单提交
const submitAddProvidersForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log('添加物流商')
      const res = await createProvider(addProviderForm.value)
      if (res.status === 200) {
        ElMessage({
          message: '添加成功',
          type: 'success',
        })
        addProviderFormVisible.value = false
      } else {
        ElMessage({
          message: '添加失败 ' + res.data.error,
          type: 'error',
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

/**
 * 编辑物流商
 */
// 打开编辑物流商弹窗
const handleEdit = async (index: number, row: any) => {
  editProviderForm.value = { ...row }
  editProviderFormVisible.value = true
  editProviderForm.value.ID = row.VendorID
  console.log(editProviderForm.value)
}

// 编辑物流商弹窗
const editProviderFormVisible = ref(false)
// 编辑物流商表单
const editProviderForm: any = ref({
  VendorName: '',
  ContactNumber: '',
  Address: '',
  Country: '',
  Remarks: '',
})
// 编辑表单对象
const editProviderFormRef = ref()

// 编辑物流商表单提交
const submitEditProvidersForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log('编辑物流商')
      const res = await updateProvider(editProviderForm.value.ID, editProviderForm.value)
      if (res.status === 200) {
        ElMessage({
          message: '编辑成功',
          type: 'success',
        })
        editProviderFormVisible.value = false
        console.log(res)
      } else {
        ElMessage({
          message: '编辑失败',
          type: 'error',
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

/**
 * 删除物流商
 */
// 删除物流商
const handleDelete = (index: number, row: any) => {
  console.log(index, row)
  ElMessageBox.alert('确认删除 ' + row.VendorName + ' 物流商？', '删除物流商', {
    confirmButtonText: '确认',
    callback: async (action: Action) => {
      if (action === 'confirm') {
        ElMessage({
          type: 'success',
          message: `删除${row.VendorName}物流商成功`,
        })
        await deleteProviderById(row.VendorID)

        // 删除 providersList 中的数据
        orderList.value.splice(index, 1)
      } else {
        ElMessage({
          type: 'error',
          message: `删除${row.VendorName}物流商失败`,
        })
      }
    },
  })
}

// 获取数据
const initProviders = async () => {
  const providers = await getProviderList({})

  orderList.value = providers.data
}

// 初始化
onMounted(async () => {
  await initProviders()
  console.log(orderList.value)
})
</script>
<template>
  <div id="providers">
    <el-container style="height: 100%">
      <el-main>
        <LineHeader #text>物流商列表</LineHeader>

        <!-- 头部 -->
        <el-row class="options-row">
          <el-col :span="8"> </el-col>
          <el-col :span="8">
            <div class="add">
              <el-button class="add-button" type="primary" @click="openAddProviderForm"
                >添加物流商</el-button
              >
            </div>
          </el-col>
          <el-col :span="8"> </el-col>
        </el-row>

        <!-- 物流商数据 -->
        <el-table ref="multipleTableRef" :data="orderList" style="width: 100%">
          <el-table-column label="物流商ID">
            <template #default="scope">{{ scope.row.VendorID }}</template>
          </el-table-column>
          <el-table-column property="VendorName" label="物流商名称" />
          <el-table-column property="ContactNumber" label="联系电话" />
          <el-table-column property="Address" label="物流商地址" />
          <el-table-column property="Country" label="地区/国家" />
          <el-table-column property="Remarks" label="备注" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">
                编辑
              </el-button>
              <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>

    <!-- 添加物流商 -->
    <el-dialog v-model="addProviderFormVisible" title="添加物流商" width="800">
      <el-form :model="addProviderForm" ref="addProviderFormRef" :rules="providerFormRules">
        <el-form-item label="物流商名称" prop="VendorName">
          <el-input v-model="addProviderForm.VendorName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="联系电话" prop="ContactNumber">
          <el-input v-model="addProviderForm.ContactNumber" autocomplete="off" />
        </el-form-item>
        <el-form-item label="物流商地址" prop="Address">
          <el-input v-model="addProviderForm.Address" autocomplete="off" />
        </el-form-item>
        <el-form-item label="国家/地区" prop="Country">
          <el-input v-model="addProviderForm.Country" autocomplete="off" />
        </el-form-item>
        <el-form-item label="物流商备注" prop="Remarks">
          <el-input v-model="addProviderForm.Remarks" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addProviderFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAddProvidersForm(addProviderFormRef)">
            添加
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 编辑物流商 -->
    <el-dialog v-model="editProviderFormVisible" title="编辑物流商" width="800">
      <el-form :model="editProviderForm" ref="editProviderFormRef" :rules="providerFormRules">
        <el-form-item label="物流商名称" prop="VendorName">
          <el-input v-model="editProviderForm.VendorName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="联系电话" prop="ContactNumber">
          <el-input v-model="editProviderForm.ContactNumber" autocomplete="off" />
        </el-form-item>
        <el-form-item label="物流商地址" prop="Address">
          <el-input v-model="editProviderForm.Address" autocomplete="off" />
        </el-form-item>
        <el-form-item label="国家/地区" prop="Country">
          <el-input v-model="editProviderForm.Country" autocomplete="off" />
        </el-form-item>
        <el-form-item label="物流商备注" prop="Remarks">
          <el-input v-model="editProviderForm.Remarks" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editProviderFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitEditProvidersForm(editProviderFormRef)">
            编辑
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped lang="scss">
#providers {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 16px 32px;
  box-sizing: border-box;

  .options-row {
    margin-bottom: 16px;
  }

  .options,
  .search,
  .add {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search {
    .search-button {
      padding: 0 32px;
      margin-left: 16px;
    }
  }

  .add {
    .add-button {
      padding: 0 48px;
    }
  }

  .page {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 32px;
  }
}
</style>
